<template>
  <!-- 联系选择弹窗 -->
  <div class="center"  v-if="backdrop">
      <div class="mui-popover mui-active">
          <span class="icon-cha" @tap="switchBackDrop"></span>
          <ul>
                <li class="mui-table-view-cell" style="padding: 11px 11px 0px 11px;">
                  <a href="tel:051082611888">联系电话</a>
                </li>
                <li class="mui-table-view-cell">
                  <a href="tel:4009288892">投诉电话</a>
                </li>
                <li class="mui-table-view-cell" @tap="switchChat">在线客服
                  <span class="icon-fanhui"></span>
                </li>
          </ul>
      </div>
      <!-- 聊天选择弹窗 -->
      <div class="mui-popover mui-active chatCenter" v-if="chat">
          <ul>
              <li class="mui-table-view-cell" @tap="goChat(1)">客服1</li>
              <li class="mui-table-view-cell" @tap="goChat(2)">客服2</li>
              <li class="mui-table-view-cell" style="background:#ff6a27;color:white;border-bottom-left-radius: 7px;border-bottom-right-radius: 7px;" @tap.self="switchChat">取消</li>
          </ul>
      </div>
      <div class="mui-backdrop"></div>
  </div>
</template>
<script>
import mui from 'static/js/mui'
export default {
    data() {
        return {
              chat: false,
        }
    },
    props: {
      // 父组件传状态
      backdrop: {
        type: Boolean,
        default: false
      }
    },
    created() { },
  
    //注意销毁掉监听，不然报错
    destroyed() {
        //   window.removeEventListener('scroll',  
        //     this.handleNavSwitch,false
        //   ) 
    },
    components: {},
    methods: {  
      switchBackDrop() {
        this.$emit('backdrop', !this.backdrop);
      },
      switchChat() {
          this.chat = !this.chat
      },
      goChat(index) {
          this.$router.push({
              name: "chat",
              params: {
                  roomType: index,
              }
          })
      }
    },
    mounted() {
        
    }
}
</script>

<style scoped>
  /* 遮罩 */
  .center {
      position: absolute;
      left: 50%;
      margin-left: -140px;
      top:20%;
      height:190px;
  }
  /* 聊天弹窗 */
  .chatCenter{
    margin-top:210px;
  }
  /* 联系弹窗 */
  .icon-cha{
      color:#333333;
      font-size:12px;
      float:right;
      position: relative;
      height:30px;
      width:280px;
      text-align: right;
      padding-right:8px;
      padding-top:8px;
  }
  .mui-table-view-cell{
    text-align: center;  
    height:60px;
    vertical-align:middle;
    line-height: 35px;
  }
  .icon-fanhui{
    color:#999999;
    top:24px;
    font-size:14px;
    margin-left:5px;
    position: absolute;
    transform:rotate(270deg);
  }
  .mui-popover{
    background-color: white;  
  }
</style>